"use client"

import Image from "next/image"
import Link from "next/link"
import { cn } from "@/lib/utils"
import {Album, AlbumBase} from "@/types";



interface AlbumCardProps {
  album: AlbumBase
  className?: string
  onAlbumUpdated?: (updatedAlbum: Album) => void;
}

export function AlbumCard({ album, className }: AlbumCardProps) {
  return (
      <Link href={`/album/${album.id}`} className={cn("group flex flex-col gap-2", className)}>
        <div className="relative aspect-square overflow-hidden rounded-md">
          <Image
              src={album.cover || "/placeholder.svg?height=200&width=200"}
              alt={album.title}
              fill
              className="object-cover transition-transform group-hover:scale-105"
          />
        </div>
        <div className="space-y-1">
          <h3 className="font-medium line-clamp-2 group-hover:text-primary transition-colors">{album.title}</h3>
          <p className="text-sm text-muted-foreground line-clamp-1">{album.artists}</p>
          <p className="text-xs text-muted-foreground">{album.releaseDate}</p>
        </div>
      </Link>
  )
}

